<template>
  <div class="integral-detail">
    <x-header>兑换结果</x-header>
    <div class="head-box">
      <icon type="success" is-msg></icon>
      <span>恭喜，兑换成功</span>
    </div>
    <div class="goods">
      <div class="goods-top">
        <div class="goods-left">
          <img class="goods-img" v-lazy="detail" alt="">
        </div>
        <div class="goods-right">
          <p class="goods-title">{{detail.name}}</p>
          <!-- <p class="goods-con">{{'无线蓝牙耳机'}}</p> -->
        </div>
      </div>
      <div class="ka-quan">
        <span>券码：{{detail.code}}</span>
        <span v-clipboard:copy="detail.code"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">复制</span>
      </div>
      <p>支付积分：{{detail.point}}积分</p>
      <p>订单编号：{{detail._id}}</p>
      <p>下单时间：{{formateTime(detail.createTime)}}</p>
    </div>
    <div class="con">
      <p class="con-title">商品详情</p>
      <pre class="con-font">{{detail.desc}}</pre>
    </div>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import moment from 'moment';
import {
  XHeader,
  Icon
} from 'vux';
const IntegralStore = namespace('integral');

@Component({
  components: {
    XHeader,
    Icon
  }
})
export default class IntegralRes extends Vue {
  @IntegralStore.Action getList
  detail = {}
  formateTime (t) {
    if (t) {
      return moment(t * 1000).format('YYYY-MM-DD HH:mm:ss')
    }
  }
  created () {
    console.log(this.$route.params, 999)
    this.detail = this.$route.params.data
  }
  onCopy (e) {
    this.$vux.toast.text('成功复制券码：' + e.text, 'middle');
  }
  onError (e) {
    this.$vux.toast.text('复制失败', 'middle');
  }
}

</script>
<style lang="less">
  .integral-detail {
    padding-top: 51px;
    padding-bottom: 51px;
    .goods {
      padding: 10px 15px;
      margin-top: 10px;
      background: #ffffff;
      p {
        // font-size: 12px;
        line-height: 24px;
      }
      .goods-top {
        height: 100px;
        align-items: center;
        justify-content: center;
        display: flex;
        img {
          margin-right: 15px;
        }
      }
      .ka-quan {
        margin: 15px 0;
        // font-size: 12px;
        height: 50px;
        background: #eeeeee;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        span:nth-child(2) {
          padding: 2px 15px;
          border-radius: 50px;
          border: 1px solid red;
          color: red;
        }
      }
      .goods-img {
        width: 80px;
        height: 80px;
      }
      .goods-title {
        font-size: 16px;
        color: #333333;
      }
      .goods-con {
        // font-size: 12px;
        color: #666666;
      }
    }
    .con {
      background: #ffffff;
      margin-top: 15px;
      padding: 10px;
      .con-title {
        line-height: 44px;
        font-size: 14px;
        color: #000000;
      }
      .con-sub-title {
        color: #333333;
        font-size: 14px;
        line-height: 24px;
        margin: 10px 0;
      }
      .con-font {
        // font-size: 12px;
        font-size: #666666;
      }
    }
    .head-box {
      background: #ffffff;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      .weui-icon_msg {
        font-size: 32px !important;
      }
      span {
        margin-left: 10px;
      }
    }
  }
</style>


